<template>
  <div>
    <el-form ref="queryForm" :model="query" :inline="true" class="form">
      <el-form-item label="">
        <el-input
          v-model.trim="query.name"
          placeholder="视频名称"
          clearable
          @change="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-select v-model="query.status" @change="handleQuery" placeholder="请选择发布状态">
          <el-option value="0" label="未发布" />
          <el-option value="1" label="已发布" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
      <el-row
        ><el-button type="primary" icon="el-icon-search" @click="handleAdd">新建</el-button></el-row
      >
    </el-form>

    <el-table v-loading="listLoading" :data="dataList" stripe border row-key="id">
      <el-table-column label="序号" align="center" type="selection" width="50" />
      <el-table-column label="序号" align="center" type="index" width="50" />
      <el-table-column label="案例名称" align="center" prop="name" />
      <el-table-column label="预览" align="center" prop="imageUrl" />
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="{ row }">
          {{ row.status === 0 ? '未发布' : '已发布' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <div v-if="row.status === 0">
            <el-button type="text" @click="handleUpdate(row)">编辑</el-button>
          <el-button type="text" @click="handleSubmit(row)" >发布</el-button>
          <!-- <el-button type="text" @click="handleSubmit(row)" >取消发布</el-button> -->
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
          </div>
          <div v-else>
                <el-button type="text" @click="handleSubmit(row)" >取消发布</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageNum"
      :limit.sync="query.pageSize"
      @pagination="handleQuery"
    />

    <el-dialog
      title="皮肤病大赛 - 新建案例"
      :visible.sync="formVisible"
      width="600px"
      center
      append-to-body
    >
      <el-form ref="formModel" :model="formModel" :rules="formModelRules" label-width="150px">
        <el-form-item label="案例名称:" prop="name">
          <el-input
            v-model.trim="formModel.name"
            style="width: 200px"
            clearable
            placeholder="请输入案例名称"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item label="图片:" prop="caseUrl">
          <upload-img v-model="formModel.caseUrl" />
        </el-form-item>
        <!-- <el-form-item label="案例链接:" prop="sort">
          <el-select v-model="formModel.link">
            <el-option value="2" label="2"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetModalForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import apis from '@/api/skinDisease/learn/caseApis.js'

export default {
  name: 'index',
  data() {
    return {
      total: 0,
      // 列表数据
      query: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        status: ''
      },
      dataList: [],
      listLoading: false,
      formVisible: false,
      formModel: {},
      formModelRules: {
        caseUrl: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
        classification: [{ required: true, message: '分类不能为空', trigger: 'blur' }],
        sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
        // link: [{ required: true, message: '链接不能为空', trigger: 'blur' }]
      },
      type: ''
    }
  },
  methods: {
    handleQuery() {
      this.listLoading = true
      apis
        .lgcasePage(this.query)
        .then(res => {
          console.log(res)
          this.dataList = res.data.records
          this.listLoading = false
          this.total = res.data.total
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    resetQuery() {
      this.query.name = ''
      this.query.status = ''
      this.handleQuery()
    },
    handleAdd() {
      this.formVisible = true
    },
      handleSubmit(row) {
       let temp={}
          if(row.status ===0){
             temp={
        imageUrl: row.imageUrl,
        xetUrl: row.xetUrl,
        learningVideoId: row.id,
        status:1
             }
        }else{
           temp={
        imageUrl: row.imageUrl,
        xetUrl: row.xetUrl,
        learningVideoId: row.id,
        status:0
             }
        }
         
          
         apis.lgcaseEdit(temp)
         .then((res)=>{
            if (res.code == 0) {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.handleQuery()
        } else {
          this.$message.error(res.message)
        }
         })
         
    },
    handleUpdate(row) {
      this.type = 'edit'
      this.formVisible = true
      this.formModel = {
        ...this.formModel,
        name: row.name,
        caseUrl: row.imageUrl,
        learningCaseId: row.id
      }
    },
    handleDelete(row) {
      apis.lgcaseDelete({ learningCaseId: row.id }).then(res => {
        console.log(res)
        if (res.code == 0) {
          this.handleQuery()
          this.$message({
            message: res.message,
            type: 'success'
          })
        } else {
          this.$message.error(res.message)
        }
      })
    },
    resetModalForm() {
      this.formVisible = false
      this.formModel = {}
      this.resetForm('formModel')
    },
    submitForm() {
      this.$refs['formModel'].validate(valid => {
        if (valid) {
          if (this.type === 'edit') {
            apis.lgcaseEdit(this.formModel).then(res => {
              if (res.code == 0) {
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                })
                this.formVisible = false
                this.handleQuery()
              } else {
                this.$message.error(res.message)
              }
            })
            return
          }

          //
          apis.lgcaseAdd(this.formModel).then(res => {
            if (res.code == 0) {
              this.$message({
                message: res.message,
                type: 'success'
              })
              this.formVisible = false
              this.handleQuery()
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    }
  },
  mounted() {
    this.handleQuery()
  }
}
</script>

<style scoped>
.form {
  margin-bottom: 20px;
}
</style>
